<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>制作全网热播视频页面</title>
    <style>
        *{margin: 0; padding: 0;font-family: "微软雅黑";font-size: 14px;}
        ul,ol,li{list-style: none;}
        #play{margin: 0 auto; width:680px; overflow: hidden;}
        #play h1{line-height: 40px; font-size: 22px;}
        #play ul>li{
            float: left;
            width: 220px;
            height: 308px;
            overflow: hidden;
            position: relative;/*background-image: url("");*/
        }
        #play ol li{height: 37px; padding: 0px 0px 0 10px; position: relative;}
        #play ul>li>span{display: block; position: absolute; left: 0; bottom: 0; font-size: 25px; color: #ffffff; font-weight: bold; padding: 5px 10px; z-index: 100;}
        #play ul>li>p{position: absolute; left: 50px; bottom: 10px; color: #ffffff;}
        #play ol{padding-top: 13px; padding-right: 5px;}
        #play ol li span{display:inline-block; color: #ffffff; margin-right: 5px; width: 20px; height: 20px; font-size: 12px; font-weight: bold; text-align: center;}
        #play ol li p{position: absolute; right: 0; top: 3px; color: #ffffff; background: #f0a30f; padding: 0 8px; font-size: 12px; display: none;}

    </style>
</head>
<body>
<section id="play">
    <h1>全网热播视频</h1>
    <ul>
        <li><img src="img/flv01.jpg"><p>昊花梦</p><span>1</span></li>
        <li><img src="img/flv02.jpg"><p>好先生</p><span>2</span></li>
        <li>
            <ol>
                <li><span>3</span>三八线<p>加入看单</p></li>
                <li><span>4</span>吉详天宝<p>加入看单</p></li>
                <li><span>5</span>亲爱的翻译官<p>加入看单</p></li>
                <li><span>6</span>仙剑云之凡<p>加入看单</p></li>
                <li><span>7</span>权力的游戏第五季<p>加入看单</p></li>
                <li><span>8</span>琅琊榜<p>加入看单</p></li>
                <li><span>9</span>那年青春我们正好<p>加入看单</p></li>
                <li><span>10</span>乡村受情8（上）<p>加入看单</p></li>
            </ol>
        </li>
    </ul>
</section>
    <script src="scripts/dev/jquery-3.4.1.js"></script>
    <script>
        $(function () {
            $('ul li:not(ul li:gt(1))').css({'margin-right':'10px'});
            $('ul>li:last').css({'background-color':'#f0f0f0'});
            $('ul li span:lt(2)').css({'background-color':'#f0a30f'});
            $('ol li span:eq(0)').css({'background-color':'#f0a30f'});
            $('ul li span:gt(2)').css({'background-color':'#a4a3a3'});
            $('ol li:lt(5)').css({'background-image':'url("img/orange.jpg")',
                'background-repeat':'no-repeat',
                'background-position-x':'180px',
                'background-position-y':'-3px'});
            $('ol li:eq(1)').css({'background-image':'url("img/green.jpg")',
                'background-repeat':'no-repeat',
                'background-position-x':'180px',
                'background-position-y':'-3px'});
            $('ol li:gt(4)').css({'background-image':'url("img/green.jpg")',
                'background-repeat':'no-repeat',
                'background-position-x':'180px',
                'background-position-y':'-3px'});
            $('ol').mousemove(function () {
                $('ol li p:hidden').show();
            });
            $('ol').mouseout(function () {
                $('ul li p:visible').hide();
                $('ol').css({'width':'215px'});
            });
        });
    </script>
</body>
</html>